<template>
    <div>
        <!-- 工具栏 -->
        <el-row>
            <el-col>
                <el-button @click="showDialog('新增差旅信息')">新增</el-button>
                <el-button @click="handleDeleteRows">删除</el-button>
            </el-col>
        </el-row>
        <!-- 表格 -->
        <el-table
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            @row-contextmenu="handleRowContextMenu"
            :show-header="false"
        >
            <!-- 固定列 -->
            <el-table-column type="selection" width="50" />
            <el-table-column prop="name" label="姓名" width="100" fixed />
            <!-- 普通列 -->
            <el-table-column prop="age" label="年龄" width="100" />
            <el-table-column prop="location" label="位置" width="200" />
            <el-table-column prop="description" label="描述" />
        </el-table>
        <!-- 右键菜单 -->
        <el-menu
            :default-active="activeMenu"
            :style="{
                position: 'absolute',
                top: `${contextMenuPosition.y}px`,
                left: `${contextMenuPosition.x}px`,
            }"
            @select="contextMenuCommand"
            v-if="contextMenuVisible"
        >
            <el-menu-item index="view">查看</el-menu-item>
            <el-menu-item index="edit">修改</el-menu-item>
            <el-menu-item index="delete">删除</el-menu-item>
        </el-menu>
        <!-- 表单弹窗 -->
        <el-dialog
            :visible="dialogVisible"
            :title="formTitle"
            @close="resetForm"
        >
            <el-form :model="formData" ref="form" :rules="rules">
                <el-form-item label="姓名" prop="name">
                    <el-input
                        v-model="formData.name"
                        placeholder="请输入姓名"
                    ></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input
                        v-model="formData.age"
                        placeholder="请输入年龄"
                    ></el-input>
                </el-form-item>
                <el-form-item label="位置" prop="location">
                    <el-input
                        v-model="formData.location"
                        placeholder="请输入位置"
                    ></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input
                        v-model="formData.description"
                        placeholder="请输入描述"
                    ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="saveTravelInfo">
                    保存
                </el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import axios from "axios";

export default {
    data() {
        return {
            tableData: [],
            selectedRows: [],
            contextMenuVisible: false,
            contextMenuPosition: { x: 0, y: 0 },
            activeMenu: "",
            dialogVisible: false,
            formTitle: "",
            formData: {
                name: "",
                age: "",
                location: "",
                description: "",
            },
            rules: {
                name: [
                    {
                        required: true,
                        message: "姓名不能为空",
                        trigger: "blur",
                    },
                    {
                        pattern: /^[^$:%*!~~&/\\]+$/,
                        message: "姓名不能包含特殊字符",
                        trigger: "blur",
                    },
                ],
                age: [
                    {
                        required: true,
                        message: "年龄不能为空",
                        trigger: "blur",
                    },
                    {
                        pattern: /^[0-9]+$/,
                        message: "年龄必须是数字",
                        trigger: "blur",
                    },
                ],
                location: [
                    {
                        required: true,
                        message: "位置不能为空",
                        trigger: "blur",
                    },
                    {
                        pattern: /^[^$:%*!~~&/\\]+$/,
                        message: "位置不能包含特殊字符",
                        trigger: "blur",
                    },
                ],
                description: [
                    {
                        required: true,
                        message: "描述不能为空",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    created() {
        // 发起AJAX请求，获取差旅信息表格的数据
        this.fetchTravelData();
    },
    methods: {
        fetchTravelData() {
            axios.get("travelData.json").then((response) => {
                this.tableData = response.data;
            });
        },
        handleSelectionChange(selection) {
            this.selectedRows = selection;
        },
        handleRowContextMenu(row, event) {
            event.preventDefault();
            this.contextMenuPosition.x = event.pageX;
            this.contextMenuPosition.y = event.pageY;
            this.contextMenuVisible = true;
            this.$refs.table.setCurrentRow(row);
        },
        contextMenuCommand(command) {
            switch (command) {
                case "view":
                    // TODO: 实现查看功能
                    this.$message.warning("查看功能尚未实现");
                    break;
                case "edit":
                    this.showDialog("修改差旅信息");
                    break;
                case "delete":
                    this.handleDeleteRows();
                    break;
            }
            this.contextMenuVisible = false;
        },
        handleDeleteRows() {
            if (this.selectedRows.length === 0) {
                this.$message.warning("请先选中要删除的记录");
                return;
            }
            this.tableData = this.tableData.filter(
                (item) => !this.selectedRows.includes(item)
            );
            this.$message.success("删除成功");
        },
        showDialog(title) {
            this.dialogVisible = true;
            this.formTitle = title;
            this.formData.name = "";
            this.formData.age = "";
            this.formData.location = "";
            this.formData.description = "";
        },
        resetForm() {
            this.$refs.form.resetFields();
        },
        saveTravelInfo() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    // 模拟保存成功后的新增或修改操作
                    if (this.formTitle === "新增差旅信息") {
                        this.tableData.push({
                            id: Math.floor(Math.random() * 1000), // 替换为实际保存后的ID
                            name: this.formData.name,
                            age: this.formData.age,
                            location: this.formData.location,
                            description: this.formData.description,
                        });
                        this.$message.success("新增成功");
                    } else if (this.formTitle === "修改差旅信息") {
                        const currentRow =
                            this.$refs.table.store.states.currentRow;
                        currentRow.name = this.formData.name;
                        currentRow.age = this.formData.age;
                        currentRow.location = this.formData.location;
                        currentRow.description = this.formData.description;
                        this.$message.success("修改成功");
                    }
                    this.dialogVisible = false;
                }
            });
        },
    },
};
</script>

<style>
.dialog-footer {
    display: flex;
    justify-content: flex-end;
}
</style>
